<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="js/util.js"></script>
    <style type="text/css">
        .container-fluid {
            width: 70vw;
            margin: 0 auto;
            padding: 2rem;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="mb-4">
        <el-button id="add" type="primary">添加</el-button>
        <el-button onclick="goBack()" type="primary">返回</el-button>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>
                        用户名
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        性别
                    </th>
                    <th>
                        年龄
                    </th>
                    <th>
                        学科
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>
    <el-link id="indexPage" type="primary">首页</el-link>
    <el-link id="prevPage" type="primary">上一页</el-link>
    <el-link id="nextPage" type="primary">下一页</el-link>
    <el-link id="lastPage" type="primary">尾页</el-link>
</div>
<script>
    const app = new Vue({
        el: ".container-fluid"
    })
    if (!isLogin()) {
        app.$message.error("您没有登录")
        setTimeout(() => {
            location.href = 'login.html'
        }, 500)
    }
    if (!isAdmin()) {
        app.$message.error("您无权操作")
        setTimeout(() => {
            location.href = 'index.html'
        }, 500)
    }

    function goBack() {
        location.href = "index.html"
    }

    $(function () {
        let curPage = 1;
        let totalPage = 10;
        query()

        function query() {
            let updateId;
            checkPage()
            $("#tbody").text("")
            $.ajax({
                url: "teacher?action=doGetTeachers&curPage=" + curPage,
                type: "GET",
                success: function (data) {
                    let list = JSON.parse(data).data.list
                    let tr;
                    for (let i = 0; i < list.length; i++) {
                        let item = list[i];
                        tr = $('<tr></tr>');
                        tr.append($("<td></td>").text(item.username))
                        tr.append($("<td></td>").text(item.name))
                        tr.append($("<td></td>").text(item.sex))
                        tr.append($("<td></td>").text(item.age))
                        tr.append($("<td></td>").text(list[i].courseName))
                        let update = "window.location = 'teaInfo.html?username=" + item.username + "'";
                        tr.append($("<button onclick=\"" + update + "\" class" +
                            "=\"button btn-warning\">修改</button>"))
                        tr.append($("<button id='" + item.username + "' class=\"button btn-danger ml-3\">删除</button>"))
                        $("#tbody").append(tr);
                        $("#" + item.username).click(function () {
                            $.ajax({
                                url: "teacher?action=doDelete&username=" + item.username,
                                type: "GET",
                                success: function (res) {
                                    res = JSON.parse(res)
                                    if (res.code === 1) {
                                        app.$message({
                                            message: res.msg,
                                            type: "success"
                                        })
                                        query();
                                    } else {
                                        app.$message.error(res.msg)
                                    }
                                }
                            })
                        })
                    }

                    totalPage = JSON.parse(data).data.totalPage
                }
            })
        }

        $("#add").click(function () {
            window.location = "addTeacher.html"
        })

        function checkPage() {
            if (curPage > 1) {
                $("#prevPage").show()
            } else {
                $("#prevPage").hide()
            }
            if (curPage >= totalPage) {
                $("#nextPage").hide()
            } else {
                $("#nextPage").show()
            }
        }

        $("#indexPage").click(function () {
            curPage = 1;
            query();
        })
        $("#prevPage").click(function () {
            if (curPage > 1) {
                curPage--
                query()
            }
        })
        $("#nextPage").click(function () {
            if (curPage < totalPage) {
                curPage++
                query()
            }
        })
        $("#lastPage").click(function () {
            if (curPage = totalPage) {
                query()
            }
        })
    })
</script>
</body>
</html>